<template>
  <VPage class="app-container">
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <template v-if="activeName != 1">
          <el-input class="w-40" v-model="form.batch_no" placeholder="批次号"></el-input>
        </template>
        <!-- <el-input class="w-40" v-model="form.batch_no" placeholder="关联批次号"></el-input> -->
        <el-input class="w-40" v-model="form.order_no" placeholder="相关单号"></el-input>
        <el-select class="selectClass" v-model="form.op_type" style="max-width: 120px" placeholder="单据类型">
          <el-option v-for="item in options['inv.orderType']?.[0].opTypeMap" :key="item.value"
            :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-select class="selectClass" v-model="form.status" style="max-width: 120px" placeholder="状态">
          <el-option v-for="item in options['cost.CostSummary']?.[0].costSummaryStatus" :key="item.value"
            :label="item.label" :value="item.value"></el-option>
        </el-select>
        <SelectWarehouse v-model="form.warehouse_id" placeholder="仓库"></SelectWarehouse>
        <VGroup>
          <el-select class="selectClass" v-model="form.timeRange.type" style="max-width: 150px">
            <el-option v-for="item in timeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-date-picker v-model="form.timeRange.value" type="daterange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" :default-time="defaultTime()" style="max-width: 300px" />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <el-button type="primary" @click="handleAbnormal">标记异常</el-button>
        <!-- <div class="w-full">
          <el-tabs v-model="activeName" class="pl-4 pr-4" @tab-change="handleChange">
            <el-tab-pane :label="item.label" :name="item.name" v-for="(item, index) in tabList"
              :key="index"></el-tab-pane>
          </el-tabs>
        </div> -->
      </template>
    </VTable>
  </VPage>
</template>
<script setup name="ConstCost-transit" lang="jsx">
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive, toRefs } from 'vue'
import SelectWarehouse from '@/components/SelectWarehouse'
import { getListCostTransit, markCostTransit } from './api/index'
import { getEnums } from '@/api/public'

const timeOption = [
  { label: "创建时间", value: "create_time" },
]

const tableRef = ref()
const tableOptins = reactive({
  rowConfig: { height: 80 },
  formConfig: {
    data: {
      timeRange: { type: 'create_time', value: [], range: true },
    }
  },
  columns: [
    {
      type: 'checkbox', fixed: 'left',width: 60
    },
    {
      field: 'owner_id', title: '货主编号', width: 80
    },
    {
      field: 'owner_name', title: '货主名称', width: 160
    },
    {
      field: 'order_no', title: '相关单号', width: 180
    },
    {
      field: 'status_name', title: '状态', width: 80
    },
    {
      field: 'op_type_name', title: '单据类型', width: 120
    },
    {
      field: 'warehouse_name', title: '仓库', width: 140
    },
    {
      field: 'sku', title: 'SKU', width: 160
    },
    {
      field: 'sku_cn_title', title: '产品名称', width: 220
    },
    {
      field: 'transit_num', title: '在途数量', width: 100
    },
    {
      field: 'purchase_cost', title: '采购成本', width: 100
    },
    {
      field: 'purchase_freight', title: '采购运费', width: 100
    },
    {
      field: 'material_cost', title: '物料成本', width: 100
    },
    {
      field: 'first_freight', title: '头程运费', width: 180
    },
    {
      field: 'storage_charge', title: '仓储费', width: 100
    },
    {
      field: 'return_charge', title: '退件费用', width: 100
    },
    {
      field: 'tax', title: '税费', width: 100
    },
    {
      field: 'create_time', title: '创建时间', width: 180
    }
  ],
  proxyConfig: {
    seq: true,
    props: {
      result: 'data',
      total: 'total',
    },
    ajax: {
      query: async ({ page, form }) => {
        const res = await getListCostTransit({ ...form, ...page })
        return new Promise(function (resolve) {
          resolve({
            data: res.data,
            total: res.total
          })
        })
      }
    }
  }
})


const data = reactive({
  options: [],
  activeName: 0,
})
const { options, activeName } = toRefs(data)

// 获取枚举类
const fetchOption = async () => {
  getEnums({
    version: "v1", "name": [
      "inv.orderType", "cost.CostSummary"
    ]
  }).then(res => {
    options.value = res.data
  })
}
fetchOption()

const handleAbnormal = async () => {
  const ids = getSelectRow().map(i => {
    return i.id
  })
  if (ids.length == 0) {
    ElMessage.error('请先选择行')
    return
  }
  ElMessageBox.confirm('是否将勾选项标记异常?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    markCostTransit({ ids })
      .then((res) => {
        query()
        ElMessage.success(res.message)
      })
  })
}

const query = () => {
  tableRef.value.query()
}

//获取已选中的行
const getSelectRow = () => {
  return tableRef?.value.$table.getCheckboxRecords()
}
</script>